<template>
    <div>
        <div class="buffer" v-if="res_records.length == 0">
            <NoData v-if="res_records.length == 0 && !loadingFailed">
                快去参加比赛，收获属于你的战绩吧~
            </NoData>
            <NoData v-if="loadingFailed">
                加载失败&nbsp;请稍后重试
            </NoData>
        </div>
        <div v-else v-for="item in res_records" :key="item.id">
            <div class="box">
                <div class="box-img" :style="{ backgroundImage: `url(${item.contestProfileSmallPath})` }"></div>
                <div class="box-writing">
                    <span>{{ item.prizeLevel }}</span>
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import NoData from '../NoData.vue';
import { GetRecords } from '@/api/front/contest.js';
import { ref, onMounted } from 'vue';
// 判断NoData是否显示
const loadingFailed = ref(false);
// 获取数据
const res_records = ref([]);
const userData = JSON.parse(localStorage.getItem('userInfo'));
async function RecordsData() {
    console.log('userId', userData.userId);
    try {
        const response = await GetRecords({ id: userData.userId });
        res_records.value = response.data // 将获取的获奖数据赋值给 ref
        console.log('res_records', res_records.value);

    } catch (error) {
        console.error('Failed to get messages:', error);
        loadingFailed.value = true;
    }
}
onMounted(() => {
    RecordsData();
});
</script>

<style scoped lang="scss">
.buffer {
    margin-left: 40px;
}

.box {
    width: calc(100% - 10px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: hidden;
    margin: 10px 40px 10px 0;
    border-radius: 10px;
    box-shadow: var(--shadow-2);

    .box-img {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
        height: 100px;
    }

    .box-writing {
        width: 125px;
        text-align: center;
    }
}
</style>